<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码生成器</title>
    <link rel="stylesheet" href="popup.css">
    <style>
        html, body {
            width: 900px !important;
            min-width: 900px !important;
            height: 650px !important;
            min-height: 650px !important;
            overflow-x: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>二维码生成器</h1>
        </div>
        
        <div class="content">
            <!-- 左侧输入区域 -->
            <div class="left-panel">
                <div class="input-section">
                    <label for="textInput">输入内容:</label>
                    <textarea id="textInput" placeholder="请输入要生成二维码的内容..." rows="8"></textarea>
                    <div class="char-count">
                        <span id="charCount">0</span>/1000 字符
                    </div>
                </div>
                
                <div class="quick-actions">
                    <button id="getCurrentUrl" class="action-btn">获取当前网址</button>
                    <button id="clearInput" class="action-btn">清空内容</button>
                </div>
            </div>
            
            <!-- 中间参数设置区域 -->
            <div class="middle-panel">
                <div class="settings-section">
                    <h3>参数设置</h3>
                    
                    <div class="setting-item">
                        <label for="qrSize">二维码尺寸:</label>
                        <select id="qrSize">
                            <option value="200">200 x 200</option>
                            <option value="300" selected>300 x 300</option>
                            <option value="400">400 x 400</option>
                            <option value="500">500 x 500</option>
                        </select>
                    </div>
                    
                    <div class="setting-item">
                        <label for="errorLevel">纠错级别:</label>
                        <select id="errorLevel">
                            <option value="L">L (约7%)</option>
                            <option value="M" selected>M (约15%)</option>
                            <option value="Q">Q (约25%)</option>
                            <option value="H">H (约30%)</option>
                        </select>
                    </div>
                    
                    <div class="setting-item">
                        <label for="foregroundColor">前景色:</label>
                        <input type="color" id="foregroundColor" value="#000000">
                    </div>
                    
                    <div class="setting-item">
                        <label for="backgroundColor">背景色:</label>
                        <input type="color" id="backgroundColor" value="#FFFFFF">
                    </div>
                    
                    <div class="setting-item">
                        <label for="margin">边距:</label>
                        <input type="range" id="margin" min="0" max="10" value="4">
                        <span id="marginValue">4</span>
                    </div>
                </div>
                
                <button id="generateBtn" class="generate-btn">生成二维码</button>
            </div>
            
            <!-- 右侧二维码展示区域 -->
            <div class="right-panel">
                <div class="qr-display">
                    <div id="qrcode"></div>
                    <div id="placeholder" class="placeholder">
                        <div class="placeholder-icon">📱</div>
                        <p>点击"生成二维码"按钮<br>查看生成的二维码</p>
                    </div>
                </div>
                
                <div class="download-section">
                    <button id="downloadPng" class="download-btn" disabled>
                        <span>📥</span> 下载PNG
                    </button>
                    <button id="downloadSvg" class="download-btn" disabled>
                        <span>📥</span> 下载SVG
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="qrcode.min.js"></script>
    <script src="popup.js"></script>
</body>
</html> 